<template>
	<view class='devicemanagement3'>
		<view class="boxlist">
			<view class="box">
				<view class="tip">
					打开纸箱大门
				</view>
				<view class='button' @click="kaiguan()">
					<view class='open' :style="{opacity:kaiopa}">开</view>
					<view class='close' :style="{opacity:guanopa}">关</view>
					<image class='kaiguan' :class="{'kaiguanright':kaiguanone==true,'kaiguanleft':kaiguanone==false}"
						src="/static/images/kaiguan.png" mode=""></image>
				</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		name: "devicemanagement1",
		data() {
			return {
				kaiguanone: false,
				kaiopa:0,
				guanopa:1
			};
		},
		methods: {
			kaiguan: function() {
				this.kaiguanone = !this.kaiguanone
				if(this.kaiguanone==true){
					this.kaiopa=1
					this.guanopa=0
				}else{
					this.kaiopa=0
					this.guanopa=1
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.devicemanagement3 {
		.boxlist {
			width: 680rpx;
			margin: 0rpx auto;

			.box {
				width: 310rpx;
				height: 240rpx;
				background-color: #FFFFFF;
				border-radius: 30rpx;
				box-sizing: border-box;
				text-align: center;
				padding-top: 40rpx;

				.button {
					width: 188rpx;
					height: 64rpx;
					display: flex;
					border: 4rpx solid #8FB5FF;
					border-radius: 32rpx;
					padding: 0rpx 40rpx;
					box-sizing: border-box;
					margin: 0rpx auto;
					margin-top: 53rpx;
					position: relative;

					view {
						width: 50%;
						text-align: center;
						line-height: 58rpx;
						color: #2F70F1;
						opacity:1;
						transition:all 0.3s;
					}

					.kaiguan {
						width: 63rpx;
						height: 63rpx;
						position: absolute;
						transition:all 0.3s;
						top: 0rpx;
						left:0rpx;
						// left:0rpx;
						// right: 0rpx;
					}

					.kaiguanleft {
						left: 0rpx !important;
					}

					.kaiguanright {
						left: 120rpx !important;
					}
				}
			}
		}
	}
</style>
